<link rel="stylesheet" href="<?php echo base_url(); ?>jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="<?php echo base_url(); ?>jqwidgets/jqwidgets/styles/jqx.energyblue.css" type="text/css"/>
<link rel="stylesheet" href="<?php echo base_url(); ?>jqwidgets/jqwidgets/styles/jqx.bootstrap.css" type="text/css"/>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/scripts/gettheme.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/jqwidgets/jqxtree.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqwidgets/jqwidgets/jqxcheckbox.js"></script>

<form class="form-horizontal well">
    <fieldset>
        <div class="well">
         
        <legend>Rúbrica</legend>
            <div class="control-group">
                <label class="control-label"><strong>Nombre Rúbrica</strong></label>
                <div class="controls"><input type="text" class="input-xxlarge" id="nombreRubrica" disabled>
                                
            </div>
            </div>
        
        </div>
        <div class="well">
                <div id="tabla_rubrica">
                    
                    
                </div>
        </div>
<!--            <div class="span1">    </div>
            <div class="span6">
                <div id="arbol">
                </div>
            </div>

            <div class="span4">
                <div id="desc1" class="control-group">
                    <strong><font id="nbr1" color='#0061cc'>Resultado:</font></strong>
                    <label></label>
                    <label></label>
                    <label>Nombre Corto</label>
                    <input class='span11' type='text' id='nbrcorto1' disabled>
                    <label>Descripción</label>
                    <textarea class='span11' rows='14' id='descripcion1' disabled></textarea>
                </div>
                <div id="desc2" class="control-group" style='display:none'>
                    <strong><font id="nbr2" color='#0061cc'>Nivel:</font></strong>
                    <label></label>
                    <label></label>            
                    <label>Nombre Corto</label>
                    <input class='span11' type='text' id='nbrcorto2' disabled>
                    <label>Valor Nivel</label>
                    <input class='span11' type='text' id='valor_niv2' disabled>
                    <label>Descripción</label>
                    <textarea class='span11' rows='14' id='descripcion2' disabled></textarea>
                </div>
            </div>-->
            
    </fieldset  >
</form>

<script type="text/javascript">

    $(document).ready(function() {  
        ver_rubrica_docente();
        visualizar_rubrica_total();
    });
        
    $('#arbol').on('select', function (event) {
        var args = event.args;
        var item = $('#arbol').jqxTree('getItem', args.element);
        //evento click
        
        var datos = {
            id : item.id,
            idPadre: item.parentId
        };

        $.ajax({
            url: "../rubricas/buscar_atributos_rubrica_docente",
            type: "POST",
            dataType: "json",
            data: datos,
            success: function(descripcion) {
                if (typeof descripcion[3] !== 'undefined'){
                    $("#desc1").hide();
                    $("#desc2").show();
                    $("#descripcion2").val(descripcion[0]);
                    $("#nbr2").html(descripcion[1]);
                    $("#nbrcorto2").val(descripcion[2]);
                    $("#valor_niv2").val(descripcion[3]);
                }
                else {
                    $("#desc1").show();
                    $("#desc2").hide();
                    $("#descripcion1").val(descripcion[0]);
                    $("#nbr1").html(descripcion[1]);
                    $("#nbrcorto1").val(descripcion[2]);
                }
            }
        });

    });

    function ver_rubrica_docente() {
        var theme = 'bootstrap';
        $.ajax({
            dataType: 'json',
            url: "../rubricas/arbol_rubrica_docente",
            success: function(resultado) {
                console.log(resultado);
                
                $("#nombreRubrica").val("RÚBRICA DEL CURSO DE "+resultado[0]);
//                $("#arbol").html(resultado[1]);
//                $("#arbol").jqxTree({ hasThreeStates: true, height: '600px', width: '400px', theme: theme });
//                $("#arbol").jqxTree('expandAll');
//                $("#arbol").jqxTree('selectItem', $("#arbol").find('li:first')[0]);
            }
        });
    }
        
</script>